<template>
  <el-container class="layout-container-demo">
    <Suspense>
      <template #default>
        <Header />
      </template>
      <template #fallback>
        <div class="loading">加载中...</div>
      </template>
    </Suspense>

    <el-container class="middle">
      <el-aside class="aside" :style="{ width: asideWidth }">
        <!-- 占满侧边栏的按钮 -->
        <el-button type="primary" class="collapse-btn" @click="toggleSidebar"
          :style="{ width: '100%', display: 'block' }">
          {{ collapseBtnName }}
        </el-button>

        <el-scrollbar>
          <el-menu default-active="3-1-4" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen"
            @close="handleClose">
            <!-- 菜单项结构 -->
            <el-sub-menu index="1">
              <template #title><el-icon>
                  <Tools />
                </el-icon><span>工具</span></template>
              <el-sub-menu index="1-1">
                <template #title><span>计划任务</span></template>
                <el-menu-item v-if="hasPermission(['plan_list', 'super_admin'])" @click="$router.push('/dailyPlan')">
                  计划列表
                </el-menu-item>
                <el-menu-item v-if="hasPermission(['task_list', 'super_admin'])" @click="$router.push('/dailyTask')">
                  任务列表
                </el-menu-item>
                <el-menu-item v-if="hasPermission(['notify_setting', 'super_admin'])"
                  @click="$router.push('/notifySetting')">
                  通知设置
                </el-menu-item>
              </el-sub-menu>

              <el-sub-menu index="1-2">
                <template #title><span>AI</span></template>
                <el-menu-item v-if="hasPermission(['leji_ai', 'super_admin'])" @click="$router.push('/ai')">
                  乐集ai
                </el-menu-item>
              </el-sub-menu>

              <el-sub-menu index="1-3">
                <template #title><span>记账</span></template>
                <el-menu-item v-if="hasPermission(['accounting', 'super_admin'])" @click="$router.push('/accounting')">
                  记账
                </el-menu-item>
                <el-menu-item v-if="hasPermission(['accounting_summary', 'super_admin'])"
                  @click="$router.push('/accountingSummary')">
                  账单汇总
                </el-menu-item>
              </el-sub-menu>

              <el-sub-menu index="1-4">
                <template #title><span>今日油价</span></template>
                <el-menu-item v-if="hasPermission(['oilPrice', 'super_admin'])" @click="$router.push('/oilPrice')">
                  今日油价
                </el-menu-item>
              </el-sub-menu>
            </el-sub-menu>

            <el-sub-menu index="2" v-if="hasPermission(['super_admin'])">
              <template #title><el-icon>
                  <IconMenu />
                </el-icon><span>权限管理</span></template>
              <el-menu-item v-if="hasPermission(['menu_manage', 'super_admin'])" @click="$router.push('/menu')">
                菜单管理
              </el-menu-item>
              <el-menu-item v-if="hasPermission(['role_manage', 'super_admin'])" @click="$router.push('/role')">
                角色管理
              </el-menu-item>
              <el-menu-item v-if="hasPermission(['user_manage', 'super_admin'])" @click="$router.push('/user')">
                人员管理
              </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="3">
              <template #title><el-icon>
                  <PictureFilled />
                </el-icon><span>相册</span></template>
              <el-menu-item v-if="hasPermission(['file_upload', 'super_admin'])" @click="$router.push('/fileUpload')">
                文件上传
              </el-menu-item>
              <el-menu-item v-if="hasPermission(['file_list', 'super_admin'])" @click="$router.push('/fileList')">
                文件查看
              </el-menu-item>
              <el-menu-item v-if="hasPermission(['album_collection_manage', 'super_admin'])"
                @click="$router.push('/albumCollectionManage')">
                相册合集管理
              </el-menu-item>
              <el-menu-item v-if="hasPermission(['album_collection_show', 'super_admin'])"
                @click="$router.push('/albumCollectionShow')">
                相册合集展示
              </el-menu-item>
              <el-menu-item v-if="hasPermission(['family_group_setting', 'super_admin'])"
                @click="$router.push('/familyGroupSetting')">
                家庭组设置
              </el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="4">
              <template #title><el-icon>
                  <Film />
                </el-icon><span>娱乐</span></template>
              <el-menu-item v-if="hasPermission(['weekly_cinema', 'super_admin'])"
                @click="$router.push('/weeklyCinema')">
                周影院
              </el-menu-item>
              <el-menu-item v-if="hasPermission(['douyin_hot', 'super_admin'])" @click="$router.push('/douyinHot')">
                抖音热点
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-scrollbar>
      </el-aside>

      <el-main class="main" :style="{ width: mainWidth }">
        <el-scrollbar>
          <router-view />
        </el-scrollbar>
      </el-main>
    </el-container>

    <Suspense>
      <template #default>
        <Footer />
      </template>
      <template #fallback>
        <div class="loading">加载中...</div>
      </template>
    </Suspense>
  </el-container>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { defineAsyncComponent } from 'vue'
import { getMenuList } from '@/utils/auth'
import { Menu as IconMenu, PictureFilled, Film, Tools } from '@element-plus/icons-vue'

const Header = defineAsyncComponent(() => import('@/views/Header.vue'))
const Footer = defineAsyncComponent(() => import('@/views/Footer.vue'))

// 权限管理
const menuList = getMenuList() as string
const currentUserMenuPermissions = menuList
const hasPermission = (menuPermissions: string[]) =>
  menuPermissions.some((permission) => currentUserMenuPermissions && currentUserMenuPermissions.includes(permission))

// 状态管理
const isCollapse = ref(true)
const asideWidth = ref('50px')
const collapseBtnName = ref('展开')

// 动态计算 main 宽度
const mainWidth = computed(() => `calc(100vw - ${parseInt(asideWidth.value)}px)`)

// 切换侧边栏展开折叠状态
const toggleSidebar = () => {
  isCollapse.value = !isCollapse.value;
  if (isCollapse.value) {
    asideWidth.value = '50px'; // 折叠后侧边栏宽度
    collapseBtnName.value = '展开';  // 折叠时按钮名称改为“展示”
  } else {
    asideWidth.value = '170px';  // 展开后侧边栏宽度
    collapseBtnName.value = '折叠';  // 展开时按钮名称改为“折叠”
  }
};

const handleOpen = (key: string, keyPath: string[]) => { }
const handleClose = (key: string, keyPath: string[]) => { }
</script>

<style scoped>
.layout-container-demo {
  height: calc(100vh);
  width: calc(100vw);
  overflow: hidden;
  /* 避免滚动条 */
  display: flex;
  flex-direction: column;
}

.middle {
  display: flex;
  overflow: hidden;
}

.aside {
  text-align: center;
  justify-items: center;
  overflow: hidden;
  /* 添加右边框 */
  border-right: 1px solid rgb(204, 204, 204);
}

.aside-header {
  text-align: right;
}

.el-menu {
  border-right: none;
}

.main {
  overflow: auto;
}

.footer {
  background-color: #f2f2f2;
}

.footer {
  background-color: #f2f2f2;
  /* 或者使用 min-height 使 footer 高度最少为 80px */
  /* min-height: 80px; */
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
